<template>
  <div class="container">

    <Container :options="{ width: 1920, height: 1080 }">
      <Map />
      <Header></Header>
      <div class="main-wrap">
        <Left></Left>
        <center></center>
        <right></right>
      </div>
    </Container>
  </div>
</template>

<script setup>
import Container from "@/components/Container.vue";
import Header from "@/components/Header.vue";
import Map from "@/components/Map.vue";
import Left from "./left/index.vue";
import center from "./center/index.vue";
import right from "./right/index.vue";
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .main-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
